<template>
  <div class="list">
    <div v-for="item in list" :key="item.index" @click="changeNav(item)">
      {{ item.name }}
    </div>
  </div>
  <knowledgeGraph v-if="navIndex == 1" />
  <adaptiveGraph v-else-if="navIndex == 2" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import knowledgeGraph from './components/knowledgeGraph.vue'
import adaptiveGraph from './components/adaptiveGraph.vue'


let navIndex = ref(1)
const list = ref([
  { name: '知识图谱', index: 1 },
  { name: '自适应图谱', index: 2 },
])

function changeNav(item: any) {
  navIndex.value = item.index
}
</script>

<style scoped>
.list {
  display: flex;
  position: absolute;
  top: 10px;
  display: flex;
  background: #78cae3;
  padding: 8px 12px;
  color: #000;
}

.list>div {
  margin-left: 8px;
  cursor: pointer;
}
</style>
